@import './../../assert/stylus/cube/variable.styl'
@import './../../assert/stylus/variable.styl'

.cart-control
  display flex
  align-items center
  .cart-decrease
    display inline-block
    transform translate3d(27px, 0, 0)
    font-size: 24px
    height: 24px
    width: 24px
    line-height: 24px
    color: #00a0dc
    padding: 6px
    .inner
      display inline-block
      line-height: 24px
      font-size $fontsize-large-xxx
      color $color-blue
      transition all 0.3s linear
      transform rotate(0)
     &.move-enter-active
      transition all 0.3s linear
      transform translate3d(0, 0, 0)
      opacity: 1
      transform rotate(180deg)
     &.move-enter-done
      transform translate3d(0, 0, 0)
      opacity: 1
      .inner
        transform rotate(180deg)
     &.move-exit
      transform translate3d(0, 0, 0)
      opacity 1
     &.move-exit-active
      transition all 0.3s linear
      transform translate3d(39px, 0, 0)
      opacity 0
     &.move-exit-done
      transform translate3d(39px, 0, 0)
      opacity 0
  .cart-count
    width: 12px
    line-height: 24px
    text-align center
    font-size $fontsize-small-s
    color $color-grey
  .cart-add
    display inline-block
    line-height 24px
    font-size $fontsize-large-xxx
    color $color-blue
    padding: 6px
    font-size: 24px